<script setup>
import { onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import GoTop from '@/components/GoTop.vue'
import Loading from '@/components/Loading.vue'
import { useSEO } from '@/composables/useSEO'
import { usePageLoading } from '@/composables/useLoading'

// SEO管理
const { setSEO } = useSEO()

// 页面加载状态
const { pageLoading } = usePageLoading()

// 应用初始化
onMounted(() => {
  // 设置默认SEO
  setSEO()

  // 初始化WOW.js动画
  if (typeof WOW !== 'undefined') {
    new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    }).init()
  }
})
</script>

<template>
  <div id="app">
    <!-- 全局页面加载状态 -->
    <Loading
      v-if="pageLoading"
      type="apple"
      text="正在加载页面..."
      fullscreen
    />

    <Header></Header>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view v-slot="{ Component }">
      <Transition name="page" mode="out-in">
        <component :is="Component" />
      </Transition>
    </router-view>
    <Footer></Footer>
    <GoTop></GoTop>
  </div>
</template>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.page-enter-to,
.page-leave-from {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-enter-from,
  .page-leave-to {
    transform: translateX(10px);
  }

  .page-leave-to {
    transform: translateX(-10px);
  }
}
</style>

